import { Pagination } from 'antd';
import './PlayListsPage.scss'
import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { getPlayList, getPlayListList } from '../../../api/index'

function PlayListsPage () {
  const [isShowSelect, setisShowSelect] = useState(false) //是否显示分类
  const [playList, setplayList] = useState([]) //所有分类名字
  const [tags, settags] = useState('') // 当前选择的分类名字
  const [playListList, setplayListList] = useState([])
  const [totalPage, settotalPage] = useState(0)
  const [page, setpage] = useState(0)
  function clickPlayList(tags){
    console.log("tags", tags)
    setpage(0)
    settags(tags)
  }
  function changePage(page){
    console.log(page,"9999")
    setpage(page-1)
  }
  // 获取全部分类风格
  useEffect(() => {
    getPlayList().then(({data}) => {
      var tempArr = []
      data.sub.forEach((item) => {
        if( !Array.isArray(tempArr[item.category]) ) {
          tempArr[item.category] = []
        }
        tempArr[item.category].push(item)   
      })
      setplayList(tempArr)
    })
  }, [])
  // 获取分类的对应歌单
  useEffect(() => {
    console.log('tags')
    getPlayListList(
      {
        cat: tags,
        offset: 50*page
      }
    ).then(({data}) => {
      if (data.code !== 200) return
      setplayListList(data.playlists)
      settotalPage(data.total)
    })
  }, [tags, page])
  return(
    <div className="onepage" id='PlayListsPage' onClick={() => setisShowSelect(false)}>
      <div className="title_box">
        <div className="left">
          <span>全部</span>
          <div className="select" onClick={(e)=>{e.stopPropagation(); setisShowSelect(!isShowSelect)}}>选择分类<i className="iconfont icon-xia"></i>
            {
              isShowSelect&&(
                <div id='1' className="select_container" onClick={(e) => e.stopPropagation()}>
                  <div className="allstyle" onClick={()=>{setisShowSelect(false); clickPlayList('')}}>全部风格</div>
                  <div className="detailstyle">
                    {
                      playList.map((item, index) => {
                        return (
                          <dl key={index}>
                            {
                              index === 0 && (<dt><i className="iconfont icon-diqiu"></i> 语种</dt>)
                            }
                            {
                              index === 1 && (<dt><i className="iconfont icon-qinjianjingyin"></i> 风格</dt>)
                            }
                            {
                              index === 2 && (<dt><i className="iconfont icon-kafei"></i> 场景</dt>)
                            }
                            {
                              index === 3 && (<dt><i className="iconfont icon-xiaolian"></i> 情感</dt>)
                            }
                            {
                              index === 4 && (<dt><i className="iconfont icon-yinle"></i> 主题</dt>)
                            }
                            <dd>
                                {
                                  item.map((citem,cindex) => {
                                    return(
                                      <span key={cindex}>
                                        <span className={tags === citem.name?'class_name_act class_name':'class_name'} onClick={e => {setisShowSelect(false); clickPlayList(citem.name)}}>{citem.name}</span>
                                        <span className='class_split'>|</span>
                                      </span>
                                    )
                                  })
                                }
                            </dd>
                          </dl>
                        )
                      })
                    }
                  </div>
                </div>
              )
            }
          </div>
        </div>
        <div className="right">热门</div>
      </div>
      <div className="playlist_box">
        {
          playListList.map((item, index) => {
            return (
              <div className="item" key={index}>
                <Link to='/my' className="image_box">
                  <img src={item.coverImgUrl} alt="" />
                  <div className="img_info">
                    <div className="hot">
                      <span className='iconfont icon-erjiheadphones31'></span>
                      {item.playCount}万
                    </div>
                    <div className="play_icon">
                      <span className='iconfont icon-bofang'></span>
                    </div>
                  </div>
                </Link>
                <Link to='/my' className="text">{item.name}</Link>
                <div className="name_box">by<span>{item.description}</span></div>
              </div>
            )
          })
        }
      </div>
      <Pagination current={page+1} style={{textAlign: 'center'}} total={totalPage} onChange={(page) => changePage(page)} showSizeChanger={false} />
    </div>
  )
}
export default PlayListsPage